<!DOCTYPE html>
<html>
<head>
	<title>超市管理系统</title>
	<meta charset="UTF-8">
	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
		}
		header {
			background-color: #333;
			color: #fff;
			padding: 1rem;
			text-align: center;
		}
		main {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 1rem;
		}
		.commodity {
			background-color: #eee;
			border: 1px solid #ccc;
			border-radius: 0.5rem;
			box-sizing: border-box;
			flex-basis: calc(33.33% - 1rem);
			margin-bottom: 1rem;
			padding: 1rem;
			text-align: center;
		}
		.commodity h2 {
			margin-top: 0;
		}
		.commodity p {
			margin: 0;
		}
		.shopping-cart {
			background-color: #eee;
			border: 1px solid #ccc;
			border-radius: 0.5rem;
			box-sizing: border-box;
			flex-basis: calc(33.33% - 1rem);
			margin-bottom: 1rem;
			padding: 1rem;
			text-align: center;
		}
		.shopping-cart h2 {
			margin-top: 0;
		}
		.shopping-cart ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.shopping-cart li {
			display: flex;
			justify-content: space-between;
			margin-bottom: 0.5rem;
		}
		.shopping-cart li:last-child {
			margin-bottom: 0;
		}
		.shopping-cart p {
			margin: 0;
		}
		.total {
			background-color: #eee;
			border: 1px solid #ccc;
			border-radius: 0.5rem;
			box-sizing: border-box;
			flex-basis: calc(33.33% - 1rem);
			margin-bottom: 1rem;
			padding: 1rem;
			text-align: center;
		}
		.total h2 {
			margin-top: 0;
		}
		.total p {
			margin: 0;
		}
	</style>
</head>
<body>
	<header>
		<h1>超市管理系统</h1>
	</header>
	<main>
		<!-- 商品列表 -->
		<div id="commodity-list"></div>

		<!-- 购物车 -->
		<div id="shopping-cart"></div>

		<!-- 总价 -->
		<div id="total"></div>
	</main>
	<script>
		// 商品列表数据
		const commodities = [
			{name: '可乐', price: 3.5, stock: 100},
			{name: '薯片', price: 5.0, stock: 50},
			{name: '牛肉干', price: 20.0, stock: 20},
			{name: '巧克力', price: 10.0, stock: 30},
			{name: '饼干', price: 8.0, stock: 40},
			{name: '方便面', price: 5.0, stock: 60},
			{name: '矿泉水', price: 2.0, stock: 200},
			{name: '啤酒', price: 4.0, stock: 80},
			{name: '红酒', price: 50.0, stock: 10},
			{name: '橙汁', price: 6.0, stock: 50}
		];

		// 购物车数据
		let shoppingCart = [];

		// 渲染商品列表
		function renderCommodityList() {
			const commodityList = document.getElementById('commodity-list');
			commodityList.innerHTML = '';
			for (let i = 0; i < commodities.length; i++) {
				const commodity = commodities[i];
				const commodityDiv = document.createElement('div');
				commodityDiv.classList.add('commodity');
				commodityDiv.innerHTML = `
					<h2>${commodity.name}</h2>
					<p>价格：${commodity.price}元</p>
					<p>库存：${commodity.stock}</p>
					<button onclick="addToCart(${i})">加入购物车</button>
				`;
				commodityList.appendChild(commodityDiv);
			}
		}

		// 渲染购物车
		function renderShoppingCart() {
			const shoppingCartDiv = document.getElementById('shopping-cart');
			shoppingCartDiv.innerHTML = '';
			const shoppingCartUl = document.createElement('ul');
			for (let i = 0; i < shoppingCart.length; i++) {
				const item = shoppingCart[i];
				const shoppingCartLi = document.createElement('li');
				shoppingCartLi.innerHTML = `
					<p>${item.commodity.name} × ${item.quantity}</p>
					<p>${item.commodity.price}元</p>
					<button onclick="removeFromCart(${i})">移除</button>
				`;
				shoppingCartUl.appendChild(shoppingCartLi);
			}
			shoppingCartDiv.appendChild(shoppingCartUl);
		}

		// 渲染总价
		function renderTotal() {
			const totalDiv = document.getElementById('total');
			totalDiv.innerHTML = '';
			const total = calculateTotal();
			const totalP = document.createElement('p');
			totalP.innerHTML = `总价：${total}元`;
			totalDiv.appendChild(totalP);
		}

		// 计算总价
		function calculateTotal() {
			let total = 0;
			for (let i = 0; i < shoppingCart.length; i++) {
				const item = shoppingCart[i];
				total += item.commodity.price * item.quantity;
			}
			return total;
		}

		// 加入购物车
		function addToCart(index) {
			const commodity = commodities[index];
			if (commodity.stock > 0) {
				let item = shoppingCart.find(item => item.commodity === commodity);
				if (item) {
					item.quantity++;
				} else {
					item = {
						commodity: commodity,
						quantity: 1
					};
					shoppingCart.push(item);
				}
				commodity.stock--;
				renderCommodityList();
				renderShoppingCart();
				renderTotal();
			}
		}

		// 移除购物车
		function removeFromCart(index) {
			const item = shoppingCart[index];
			item.commodity.stock += item.quantity;
			shoppingCart.splice(index, 1);
			renderCommodityList();
			renderShoppingCart();
			renderTotal();
		}

		// 初始化
		function init() {
			renderCommodityList();
			renderShoppingCart();
			renderTotal();
		}

		// 页面加载完成后执行初始化
		window.addEventListener('load', init);
	</script>
</body>
</html>